<template>
  <div>
    <div class="header">
      <van-icon @click="goback" size="16px" name="arrow-left" />
      <div class="title">精准估价 更快出售</div>
      <div style="flex: 1"></div>
    </div>
    <div class="space"></div>
    <div class="houseinfo">
      <van-cell title="城市" size="large" is-link @click="show1 = true">{{
        value1
      }}</van-cell>
      <van-cell title="楼层" size="large" is-link @click="show2 = true">{{
        value2
      }}</van-cell>
      <van-cell title="户型" size="large" is-link @click="show3 = true">{{
        value3
      }}</van-cell>
      <van-cell class="pcell" title="面积" size="large">
        <input type="number" v-model="sendval.area" placeholder="请填写" />
      </van-cell>
      <van-cell class="pcell" title="小区" size="large">
        <input type="text" v-model="sendval.name" placeholder="请填写" />
      </van-cell>
    </div>
    <div v-show="!more" @click="more = true" class="more">
      更详尽房源信息 估价更精确<van-icon name="arrow-down" />
    </div>
    <div v-show="more" class="morecontent">
      <div class="tipsword">更详尽房源信息 估价更精确<span>(选填)</span></div>
      <div class="houseinfo">
        <van-cell class="pcell" title="套内面积" size="large">
          <input type="text" v-model="sendval.inarea" placeholder="请填写" />
        </van-cell>
        <van-cell class="pcell" title="装修费用" size="large">
          <input
            type="number"
            v-model="sendval.sendmoeny"
            placeholder="请填写"
          />
        </van-cell>
        <van-cell class="pcell" title="装修完成时间" size="large">
          <input type="number" v-model="sendval.time" placeholder="请填写" />
        </van-cell>
      </div>
      <div class="tipsword">房源优劣势<span>(单击选择标签)</span></div>
      <div class="sort">
        <span
          ref="tips"
          @click="tipchoose($event, item)"
          v-for="item in tiplist"
          :key="item"
        >
          {{ item }}
        </span>
      </div>
    </div>
    <div class="tipsword">贴心服务</div>
    <div class="sers">
      <div class="">
        <img src="../../assets/buyeva01.png" />
        <div class="">大数据精准估价</div>
      </div>
      <div class="">
        <img src="../../assets/buyeva02.png" />
        <div class="">市场指导政策合规</div>
      </div>
    </div>
    <div class="btnpart">
      <button @click="jump">立即估价</button>
      <div class="safe"></div>
    </div>

    <van-popup
      v-model="show1"
      :style="{ height: '40%' }"
      position="bottom"
      @close="onclose1"
    >
      <van-picker
        show-toolbar
        title="城市"
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="onCancel1"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      v-model="show2"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose2"
    >
      <van-picker
        show-toolbar
        title="楼层"
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="onCancel2"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      v-model="show3"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose3"
    >
      <van-picker
        show-toolbar
        title="户型"
        :columns="columns3"
        @confirm="onConfirm3"
        @cancel="onCancel3"
        visible-item-count="4"
      />
    </van-popup>
  </div>
</template>

<script>
import { get19citylist } from "../../apis/buy.js";
import local from "../../utils/local.js";
export default {
  data() {
    return {
      sendval: {
        sourceAdCode: "",
        floor: "",
        houseType: "",
        name: "",
        area: "",
        inarea: "",
        sendmoeny: "",
        time: "",
      },
      show1: false,
      show2: false,
      show3: false,
      more: false,
      value1: "请选择",
      value2: "请选择",
      value3: "请选择",
      columns1: [],
      columns2: ["低层1-7层", "中层8-16层", "高层17层及以上"],
      columns3: ["1居室", "2居室", "3居室", "4居室", "5居室及以上"],
      tiplist: [
        "南北通透",
        "通风一般",
        "采光一般",
        "采光充足",
        "安静中庭",
        "一定噪音",
        "近垃圾站",
        "近高架桥",
      ],
      choosetip: [],
    };
  },
  created() {
    this.getcitylist();
    if (local.get("sentEvaluateData")) {
      this.getsetInfo();
    }
  },
  beforeDestroy() {
    let obj = { sendval: {}, choosetip: [] };
    obj.sendval = this.sendval;
    obj.choosetip = this.choosetip;
    local.set("sentEvaluateData", JSON.stringify(obj));
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    getsetInfo() {
      let a = JSON.parse(local.get("sentEvaluateData"));
      this.sendval = a.sendval;
      this.choosetip = a.choosetip;
      if (a.sendval.sourceAdCode) {
        get19citylist({}).then((res) => {
          res.result.list.forEach((e) => {
            if (e.adcode == a.sendval.sourceAdCode) {
              this.value1 = e.name;
              return;
            }
          });
        });
      }
      if (a.sendval.floor) {
        if (a.sendval.floor == "1") {
          this.value2 = "低层1-7层";
        } else if (a.sendval.floor == "2") {
          this.value2 = "中层8-16层";
        } else if (a.sendval.floor == "3") {
          this.value2 = "高层17层及以上";
        }
      }
      if (a.sendval.houseType) {
        if (a.sendval.houseType == "1") {
          this.value3 = "1居室";
        } else if (a.sendval.houseType == "2") {
          this.value3 = "2居室";
        } else if (a.sendval.houseType == "3") {
          this.value3 = "3居室";
        } else if (a.sendval.houseType == "4") {
          this.value3 = "4居室";
        } else if (a.sendval.houseType == "5") {
          this.value3 = "5居室及以上";
        }
      }
    },
    jump() {
      if (this.sendval.sourceAdCode == "") {
        this.$toast("请选择城市");
      } else if (this.sendval.floor == "") {
        this.$toast("请选择楼层");
      } else if (this.sendval.houseType == "") {
        this.$toast("请选择户型");
      } else if (this.sendval.name == "") {
        this.$toast("请填写小区名称");
      } else if (this.sendval.area == "") {
        this.$toast("请填写面积");
      } else {
        this.$router.push({ path: "/buyevaluateresult" });
      }
    },
    onclose1() {
      this.show1 = false;
    },
    onclose2() {
      this.show2 = false;
    },
    onclose3() {
      this.show3 = false;
    },
    async getcitylist() {
      await get19citylist({}).then((res) => {
        this.citylist = res.result.list;
        this.citylist.forEach((e, i) => {
          this.columns1[i] = e.name;
        });
      });
    },
    onConfirm1(value) {
      this.value1 = value;
      this.citylist.forEach((e) => {
        if (e.name == value) {
          this.sendval.sourceAdCode = e.adcode;
          return;
        }
      });
      this.show1 = false;
      if (this.value2 == "请选择") {
        this.show2 = true;
      }
    },
    onCancel1() {
      this.show1 = false;
    },
    onConfirm2(value) {
      if (value == "低层1-7层") {
        this.sendval.floor = "1";
      } else if (value == "中层8-16层") {
        this.sendval.floor = "2";
      } else if (value == "高层17层及以上") {
        this.sendval.floor = "3";
      }
      this.value2 = value;
      this.show2 = false;
      if (this.value3 == "请选择") {
        this.show3 = true;
      }
    },
    onCancel2() {
      this.show2 = false;
    },
    onConfirm3(value) {
      if (value == "1居室") {
        this.sendval.houseType = "1";
      } else if (value == "2居室") {
        this.sendval.houseType = "2";
      } else if (value == "3居室") {
        this.sendval.houseType = "3";
      } else if (value == "4居室") {
        this.sendval.houseType = "4";
      } else if (value == "5居室及以上") {
        this.sendval.houseType = "5";
      }
      this.value3 = value;
      this.show3 = false;
    },
    onCancel3() {
      this.show3 = false;
    },
    tipchoose(event, item) {
      if (event.currentTarget.classList[0] === "active") {
        let i = this.choosetip.indexOf(item);
        this.choosetip.splice(i, 1);
        event.currentTarget.classList.remove("active");
      } else {
        this.choosetip.push(item);
        event.currentTarget.classList.add("active");
      }
    },
  },
  watch: {
    more(newval) {
      if (newval) {
        if (local.get("sentEvaluateData")) {
          let a = JSON.parse(local.get("sentEvaluateData"));
          if (a.choosetip.length > 0) {
            this.$nextTick(() => {
              this.$refs.tips.forEach((e) => {
                a.choosetip.forEach((item) => {
                  if (e.innerText == item) {
                    e.classList.add("active");
                  }
                });
              });
            });
          }
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
  }
}
.space {
  height: 50px;
}
.houseinfo {
  input {
    width: 150px;
    text-align: right;
    border: none;
  }
  /deep/.pcell {
    .van-cell__value {
      padding-right: 17px;
    }
  }
}
.more {
  margin: 15px 0;
  text-align: center;
  font-size: 13px;
  color: #333;
}
.tipsword {
  margin: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  span {
    font-size: 12px;
    font-weight: normal;
  }
}
.morecontent {
  .sort {
    margin: 20px 15px 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    span {
      display: inline-block;
      width: 21%;
      height: 30px;
      background-color: #f2f2f2;
      text-align: center;
      line-height: 30px;
      border-radius: 20px;
      margin-bottom: 10px;
      font-size: 13px;
      color: #666;
    }
    .active {
      background-color: #45b7cb;
      color: #fff;
    }
  }
}
.sers {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0 100px;
  > div {
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
input {
  color: #969799;
  &::placeholder {
    color: #969799;
  }
}
</style>
